<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head >
  <meta charset="UTF-8">
  <title>管理后台登录</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="login">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
      <div class="ur container">
        <div class="ui middle aligned center aligned grid">
          <div class="column">
            <h2 class="ui teal image header">
              <div class="content">
                管理后台登录
              </div>
            </h2>
            <div style=" padding-top: 20px; border: 2px solid #f2f2f2; border-radius: 5px" align="center">
              <el-form style="width: 85%" :model="userForm" :rules="rules" ref="userForm">
                <el-form-item label="" prop="username">
                  <el-input v-model="userForm.username"
                            type="text" prefix-icon="el-icon-user"
                            clearable placeholder="用户名" style=""></el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                  <el-input v-model="userForm.password"
                            type="password"
                            prefix-icon="el-icon-lock" clearable
                            placeholder="密码"
                            @keyup.enter.native="submitForm('userForm')"></el-input>
                </el-form-item>
                <el-form-item style="width: 70%">
                  <el-button class="m-border" type="primary" @click="submitForm('userForm')" style="background-color: #00aaaa">登录</el-button>
                  <el-button class="m-border" @click="resetForm('userForm')" style="">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

<script>
  new Vue({
    el: '#login',
    data: {
      userForm:{
        username:"",
        password:""
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    },
    methods:{
      // 提交表单
      submitForm(userForm) {
        this.$refs[userForm].validate((valid) => {
          if (valid) {
            //发送一个ajax请求
            axios.post("http://localhost:8088/admin/login", this.userForm).then(res => {
              console.log(res.data);
              if (res.data.code == 0) { //登录成功
                this.$message({
                  message: '恭喜你，' + res.data.message,
                  type: 'success'
                });
                // 阻塞1秒
                setTimeout(function() {
                  window.location.assign("http://localhost:8088/admin/index");
                }, 300);
              } else { //登录失败
                this.$message.error(res.data.message);
                this.userForm={
                  username:"",
                  password:""
                };
              }
            });
          } else {
            this.$message.error("当前输入的数据不合法!!!");
            return false;
          }
        });
      },
      // 表单重置
      resetForm(userForm) {
        this.$refs[userForm].resetFields();
      }
    }
  });
</script>

<style>
/* https://unsplash.it/1000/400?image=1015 */
  body {
    font-size: 15px;
    padding: 0;
    margin: 0;
    font-family: "微软雅黑","宋体",Arial;
    width: 100%;
    height: 100%;
    background: url(https://unsplash.it/1000/400?image=201) no-repeat top
    center fixed;
    background-size: cover;
  }
</style>
</html>